<template>
  <div class="chart-container">
    <div class="view"></div>
    <div class="avatar-container">
      <el-dropdown
        @command="handleCommand"
        class="right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <img :src="userStore.avatar" class="user-avatar" />
          <div class="user-text">{{ userStore.name }}</div>
          <!-- <el-icon><caret-bottom /></el-icon> -->
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item divided command="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="chart-title">重点目标单位督查全景舱</div>
    <div class="chart-search">
      <el-cascader
        ref="cascader"
        v-model="params.region"
        placeholder="请选择所在区域"
        :options="options"
        filterable
        clearable
        @change="handlerregion"
        :props="areaprops"
        popper-class="confirmadd_el-cascader-dropdown"
        style="width: 300px"
      ></el-cascader>
      <el-select
        v-model="params.typeId"
        placeholder="请选择单位类型"
        clearable
        class="search-item"
        popper-class="confirmadd_el-select-dropdown"
        @change="selectVisibleChage"
      >
        <el-option
          v-for="dict in unittypeList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>
      <el-select
        v-model="params.levelId"
        placeholder="请选择单位级别"
        clearable
        class="search-item"
        popper-class="confirmadd_el-select-dropdown"
        @change="selectVisibleChage"
      >
        <el-option
          v-for="dict in unitlevelList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>
      <el-select
        v-model="params.industryId"
        placeholder="请选择所属行业"
        clearable
        class="search-item"
        popper-class="confirmadd_el-select-dropdown"
        @change="selectVisibleChage"
      >
        <el-option
          v-for="dict in supervisorList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>

      <!-- <el-button @click="getdataList" class="search-box-btn newsearch"
        ><img src="@/assets/images/search.png" alt="" /> 搜索
      </el-button> -->
      <el-button @click="reset(1)" class="search-box-btn refresh"
        ><img src="@/assets/images/wreset.png" alt="" />
        <span> 重置 </span>
      </el-button>
    </div>
    <!--    <div class="chart-content"></div>-->
    <div class="content-left">
      <div class="card-item1" style="height: 230px">
        <div class="item-title">单位类型</div>
        <dataStatistics ref="statistics" />
      </div>
      <div class="card-item1" style="height: 26%">
        <div class="item-title">单位等级</div>
        <ControlArea ref="controlArea" />
      </div>
      <div class="card-item2" style="height: 40%">
        <div class="item-title">单位分布</div>
        <Regionaldistribution
          ref="regionaldistribution"
          v-if="showregionaldistribution"
        />
      </div>
    </div>
    <!-- <div class="content-middle">
      <div class="middle-map">
      </div> -->
    <div class="middle-bottom">
      <div class="item-title">检查趋势</div>
      <Checktrends ref="checktrends" />
    </div>
    <!--  </div> -->
    <div class="content-right">
      <div class="card-item1" style="height: 230px">
        <div class="item-title">
          <div class="text">检查记录</div>
        </div>
        <Inspectionrecords ref="inspectionrecords" />
      </div>
      <div class="card-item1" style="height: 26%">
        <div class="item-title">
          <div class="text">隐患处置</div>
        </div>
        <Hazarddisposal ref="hazarddisposal" />
      </div>
      <div class="card-item2" style="height: 40%">
        <div class="item-title">
          <div class="text">区域排名</div>
          <el-select
            v-model="params.orderNo"
            placeholder="按检查排名"
            clearable
            popper-class="confirmadd_el-select-dropdown"
            size="small"
            style="width: 100px; margin-top: 5px"
            @change="handlerorderNo"
          >
            <el-option
              v-for="dict in CheckdangerList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </div>
        <Checkdistribution
          ref="checkdistribution"
          v-if="showcheckdistribution"
        />
      </div>
    </div>
    <Threemap
      ref="threemap"
      @back-to="backPrevious"
      @reverse-lookup="searchCityOrAreaCode"
      :search-provinces-municipalities="params.region"
    ></Threemap>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getDictsApi, getAreaList } from "@/api/dict";
import {
  gettypeList,
  getcheckDtlList,
  getwarnList,
  getwarnNoCheckList,
  getcheckList,
  getdriveArea,
  getwarnCheckDtlList,
  getwarnNoCheckDtlList,
  getcheckDirectList,
  getdriveScore,
  getwranDtl,
  getUrbanAreaCode,
} from "@/api/chart/chart";
import DataStatistics from "./dataStatistics.vue";
import ControlArea from "./controlArea.vue";
import Regionaldistribution from "./regionaldistribution.vue";
import Inspectionrecords from "./Inspectionrecords.vue";
import Hazarddisposal from "./hazarddisposal.vue";
import Checktrends from "./checktrends.vue";
import Checkdistribution from "./checkdistribution.vue";
import MapEchart from "./mapEchart.vue";
import Threemap from "./threemap.vue";

import useUserStore from "@/store/modules/user";

const userStore = useUserStore();

import { ElMessageBox } from "element-plus";

// 搜索参数
let params = reactive({
  pageNum: 1,
  pageSize: 20,
  region: [],
  provinceId: "",
  cityId: "",
  zoneId: "",
  streetId: "",
  typeId: "",
  levelId: "",
  industryId: "",
  orderNo: "1",
});

let showcheckdistribution = ref(true);
let showregionaldistribution = ref(true);

let unittypedata = ref([]);

//行政区划数据
let options = ref([]);
// 单位类型下拉
const unittypeList = ref([]);
// 单位级别下拉
const unitlevelList = ref([]);
// 所属行业下拉
const supervisorList = ref([]);
// 检查隐患下拉
const CheckdangerList = ref([]);

const areaprops = {
  lazy: true,
  checkStrictly: true,
  lazyLoad(node, resolve) {
    const { level } = node;
    let datas = [];
    setTimeout(() => {
      let code;
      if (userStore.authorityType == 0) {
        code = userStore.provinceId;
      } else if (userStore.authorityType == 1) {
        code = userStore.cityId;
      } else if (userStore.authorityType == 2) {
        code = userStore.zoneId;
      } else {
        code = userStore.zoneId;
      }

      if (level != 0) {
        code = node.data.value;
      }
      getAreaList({ pid: code }).then((response) => {
        if (response.data && response.data.length) {
          datas = response.data.map((item, i) => ({
            value: item.value,
            label: item.label,
            leaf: level >= 2 - userStore.authorityType,
            // disabled: true, // 这里可以设置为 true 来禁用这个选项
          }));
        } else {
          datas = [];
        }
        resolve(datas);
      });
    }, 200);
  },
};

/**
 * @description: 联级处理省市区操作
 * @param {String} type 类型
 */
const handlerorderNo = () => {
  getdriveAreadata();
};

/**
 * @description: 联级处理省市区操作
 * @param {String} type 类型
 */
const cascader = ref(null);
const handlerregion = (value) => {
  if (!value) {
    params.region = [];
    params.provinceId = null;
    params.cityId = null;
    params.zoneId = null;
    params.streetId = null;
    getdataList();

    return;
  }
  switch (userStore.authorityType) {
    case 0:
      switch (value.length) {
        case 1:
          params.cityId = null;
          params.zoneId = null;
          params.streetId = null;
          params.cityId = value[0];
          break;
        case 2:
          params.cityId = null;
          params.zoneId = null;
          params.streetId = null;
          params.cityId = value[0];
          params.zoneId = value[1];
          break;
        case 3:
          params.cityId = null;
          params.zoneId = null;
          params.streetId = null;
          params.cityId = value[0];
          params.zoneId = value[1];
          params.streetId = value[2];
          break;

        default:
          break;
      }

      break;
    case 1:
      switch (value.length) {
        case 1:
          params.cityId = null;
          params.zoneId = null;
          params.streetId = null;
          params.zoneId = value[0];
          break;
        case 2:
          params.cityId = null;
          params.zoneId = null;
          params.streetId = null;
          params.zoneId = value[0];
          params.streetId = value[1];
          break;
        default:
          break;
      }
      break;
    case 2:
    case 3:
      switch (value.length) {
        case 1:
          params.cityId = null;
          params.zoneId = null;
          params.streetId = null;
          params.streetId = value[0];
          break;
        default:
          break;
      }
      break;
    default:
      break;
  }
  cascader.value.togglePopperVisible(false);
  getdataList();
};

const selectVisibleChage = () => {
  getdataList();
};
/**
 * @description: 地图组件 返回上一级
 */
const backPrevious = () => {
  let lastItem = params.region.slice(0, -1);
  if (lastItem) {
    params.region = lastItem;
  } else {
    params.region = [];
  }
  switch (Number(params.region.length)) {
    case 2:
      params.streetId = null;
      break;
    case 1:
      params.zoneId = null;
      params.streetId = null;
      break;
    case 0:
      params.cityId = null;
      params.zoneId = null;
      params.streetId = null;
      break;
    default:
      break;
  }
  getdataList();
};
/**
 * @description: 查询 adcode 对应的市、区 id
 * @param {*} adCode
 */
const searchCityOrAreaCode = async (adCode) => {
  let res = await getUrbanAreaCode({ areaCode: adCode });
  let city = res.city;
  let zone = res.zone;
  let province = res.province;
  //   if (province.id) {
  //     params.provinceId = province.id;
  //   }
  if (city.id) {
    params.cityId = city.id;
    params.region = [params.cityId];
  }
  if (zone.id) {
    params.zoneId = zone.id;
    params.region = [params.cityId, params.zoneId];
  }
  getdataList();
};
/**
 * @description: 筛选数据
 */
const getdataList = () => {
  gettypedata();
  getinspection();
  getwarnListdata();
  getdriveAreadata();
  getcheckDirectListdata();
  getEchartmapdata();
};

/**
 * @description: 单位类型 等级 区域数据
 */
const gettypedata = () => {
  showregionaldistribution.value = false;
  let res = gettypeList(params).then((res) => {
    statistics.value.accept(res.typeList || []);
    controlArea.value.accept(res.levelList || []);
    showregionaldistribution.value = true;
    setTimeout(() => {
      regionaldistribution.value.accept(res.areaList || []);
    }, 1000);
  });
};

/**
 * @description: 累计检查
 */
const getinspection = async () => {
  let res = await getcheckDtlList(params);
  //  .then((res) => {
  inspectionrecords.value.accept(res);
  //   });
};
/**
 * @description: 隐患处置
 */
const getwarnListdata = async () => {
  //   getwarnCheckDtlList(params).then((res) => {
  //     getwarnNoCheckDtlList(params).then((response) => {
  //       let obj = { ...res, ...response };
  //       hazarddisposal.value.accept(obj);
  //     });
  //   });
  const [res, response] = await Promise.all([
    getwarnCheckDtlList(params),
    getwarnNoCheckDtlList(params),
  ]);
  let obj = { ...res, ...response };
  hazarddisposal.value.accept(obj);
};

/**
 * @description: 分布
 */
const getdriveAreadata = () => {
  showcheckdistribution.value = false;
  let res = getdriveArea(params).then((res) => {
    showcheckdistribution.value = true;
    nextTick(() => {
      checkdistribution.value.accept(res);
    });
  });
};

/**
 * @description: 地图
 */
const getEchartmapdata = async () => {
  let obj = {};
  let driveScore = [];
  let warnDtlList = [];
  //   await getwarnList(params).then((res) => {
  //     obj = { ...obj, ...res };
  //   });
  //   await getwarnNoCheckList(params).then((res) => {
  //     obj = { ...obj, ...res };
  //   });
  //   await getcheckList(params).then((res) => {
  //     obj = { ...obj, ...res };
  //   });
  //   await gettypeList(params).then((res) => {
  //     obj = { ...obj, cnt1: res.cnt1 };
  //   });
  const promises = [
    getwarnList(params),
    getwarnNoCheckList(params),
    getcheckList(params),
    gettypeList(params),
  ];

  // 同时处理所有请求
  const results = await Promise.all(promises);

  // 优化数据合并，避免同名属性的数据被覆盖
  results.forEach((res, index) => {
    if (index < 3) {
      // 前三个请求合并策略
      obj = { ...obj, ...res };
    } else if (index === 3) {
      // 第四个请求特殊情况处理，避免覆盖
      obj.cnt1 = res.cnt1;
    }
  });

  //   if (userStore.authorityType == 0 || userStore.authorityType == 1) {
  //     await getdriveScore(params).then((res) => {
  //       driveScore = res.driveScore;
  //     });
  //   }
  let res = await getwranDtl(params);
  //  .then((res) => {
  warnDtlList = res.warnDtlList;
  //   });
  threemap.value.accept(obj, driveScore, warnDtlList, params);
};
/**
 * @description: 趋势
 */
const getcheckDirectListdata = async () => {
  let res = await getcheckDirectList(params);
  //  .then((res) => {
  checktrends.value.accept(res);
  //   });
};

/**
 * @description: 重置
 */
const reset = (type) => {
  Object.assign(params, {
    pageNum: 1,
    pageSize: 20,
    region: [],
    provinceId: "",
    cityId: "",
    zoneId: "",
    streetId: "",
    typeId: "",
    levelId: "",
    industryId: "",
    orderNo: "1",
  });
  getdataList();
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  await getDictsApi("institution_type").then((res) => {
    //单位类型下拉
    if (res.code === 200) {
      unittypeList.value = res.data;
    }
  });
  await getDictsApi("institution_industry_type").then((res) => {
    //行业主管下拉
    if (res.code === 200) {
      supervisorList.value = res.data;
    }
  });
  await getDictsApi("fkwz_institution_level_type").then((res) => {
    //单位级别下拉
    if (res.code === 200) {
      unitlevelList.value = res.data;
    }
  });
  await getDictsApi("drive_area_order").then((res) => {
    //检查隐患下拉
    if (res.code === 200) {
      CheckdangerList.value = res.data;
    }
  });
}

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}

function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        // location.href = "/index";
        location.href = import.meta.env.VITE_BASE_ROUTEAPI + "/login";
      });
    })
    .catch(() => {});
}

//处置数据统计表格自适应
let statistics = ref(null);
let controlArea = ref(null);
let regionaldistribution = ref(null);
let inspectionrecords = ref(null);
let hazarddisposal = ref(null);
let checkdistribution = ref(null);
let checktrends = ref(null);
let mapEchart = ref(null);
let threemap = ref(null);
const resize = () => {
  if (statistics.value) {
    statistics.value.resize();
  }
  if (controlArea.value) {
    controlArea.value.resize();
  }
  if (checktrends.value) {
    checktrends.value.resize();
  }
};

/**
 * @description: 全屏时适配
 */

const onWindowResize = () => {
  getdataList();
  resize();
};

onMounted(() => {
  getDicts();
  window.addEventListener("resize", onWindowResize, false);
  onWindowResize();
});
</script>

<style scoped lang="scss">
.chart-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #001427;

  .view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 20;
    background: url("@/assets/images/databac.png") no-repeat;
    background-size: 100% 100%;
  }

  .avatar-container {
    position: absolute;
    top: 10px;
    right: 0;
    margin-right: 30px;
    cursor: pointer;
    z-index: 22;

    .avatar-wrapper {
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;

      .user-avatar {
        cursor: pointer;
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      .user-text {
        margin: 5px 5px 5px 10px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .user-set {
        margin-top: -6px;
      }

      i {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }

  .chart-title {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 30%;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 800;
    font-size: 28px;
    color: #ffffff;
    background: linear-gradient(
      0deg,
      #96b4d0 33.837890625%,
      #ffffff 61.6943359375%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* padding-top: 10px; */
    transform: translate(-50%, 0);
    z-index: 24;
  }

  .chart-search {
    display: flex;
    gap: 20px;
    position: absolute;
    top: 8vh;
    left: 40px;
    width: calc(100% - 80px);
    z-index: 22;

    .search-box-btn {
      color: #fff;
      background: #005c83;
      border: 1px solid #3ab4ff;
      border-radius: 2px;

      img {
        margin-right: 8px;
      }
    }

    .refresh {
      background: #b59900;
      border-color: #ffe348;
    }

    .refresh:focus {
      background-color: #b59900 !important;
    }

    .newsearch:focus {
      background-color: #005c83 !important;
    }

    :deep(.el-input__wrapper) {
      border-radius: 5px;
      border: 1px solid #2c8fc9;
      background: #02101e;
      box-shadow: unset !important;
    }

    :deep(.el-input__inner) {
      color: #fff;
    }
  }

  .chart-content {
    position: absolute;
    top: 13vh;
    display: flex;
    width: calc(100% - 80px);
    height: 83.5vh;
  }

  .content-left {
    width: 21%;
    height: 83.5vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //background-color: #001427;
    position: absolute;
    left: 40px;
    bottom: 4%;
    z-index: 15;

    .card-item1 {
      //   flex: 7;
      //   margin-bottom: 20px;
      background: url("@/assets/images/border1.png") no-repeat;
      background-size: 100% 100%;
    }

    .card-item2 {
      //   flex: 10;
      background: url("@/assets/images/border2.png") no-repeat;
      background-size: 100% 100%;
    }

    .item-title {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      font-weight: 800;
      font-size: 16px;
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #96b4d0 33.837890625%,
        #ffffff 61.6943359375%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  // .content-middle {
  //   height: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   justify-content: space-between;
  //   width: 62%;
  //   margin: 0 20px;
  //   .middle-map {
  //     position: relative;
  //     width: 100%;
  //     height: 70%;
  //     background: url("@/assets/images/mapEchart.png") no-repeat;
  //     background-size: 100% 100%;
  //   }
  .middle-bottom {
    width: 50%;
    height: 22%;
    background: url("@/assets/images/border3.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 15;

    .item-title {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      font-weight: 800;
      font-size: 16px;
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #96b4d0 33.837890625%,
        #ffffff 61.6943359375%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  // }
  .content-right {
    width: 21%;
    height: 83.5vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //background-color: #001427;
    position: absolute;
    right: 40px;
    bottom: 4%;
    z-index: 15;

    .card-item1 {
      //   flex: 7;
      //   margin-bottom: 20px;
      background: url("@/assets/images/border1.png") no-repeat;
      background-size: 100% 100%;
    }

    .card-item2 {
      //   flex: 10;
      background: url("@/assets/images/border2.png") no-repeat;
      background-size: 100% 100%;
    }

    .item-title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      font-weight: 800;
      font-size: 16px;

      .text {
        color: #ffffff;
        background: linear-gradient(
          0deg,
          #96b4d0 33.837890625%,
          #ffffff 61.6943359375%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      :deep(.el-input__wrapper) {
        border-radius: 5px;
        border: 1px solid #2c8fc9;
        background: #02101e;
        box-shadow: unset;
      }

      :deep(.el-input__inner) {
        color: #fff;
      }
    }
  }
}
</style>

<style lang="scss">
.confirmadd_el-select-dropdown {
  border: transparent !important;
  background-color: rgba(35, 62, 92, 1);
  color: #fff;
  /* // width: 50% !important;
    // min-width: 0px !important; */

  .el-select-dropdown__item {
    font-size: 14px;
    cursor: pointer;
    color: #fff;
  }

  .el-select .el-input__wrapper,
  .el-input__wrapper {
    background-color: rgba(35, 62, 92, 1);
    color: #fff;
    border: 1px solid #00f3fd;
    box-shadow: none;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #51e3f3;
  }

  .el-select-dropdown {
    border: none;
  }

  /* // option选项 上面的箭头 */
  .el-popper .popper__arrow::after {
    border-bottom-color: rgb(0, 142, 188);
  }
}

/* // option选项 上面的箭头 */
.confirmadd_el-select-dropdown[data-popper-placement^="bottom"]
  .el-popper__arrow::before {
  border-bottom-color: rgb(35, 62, 92) !important;
  border-right-color: rgb(35, 62, 92) !important;
  border-top-color: rgb(35, 62, 92) !important;
  border-left-color: rgb(35, 62, 92) !important;
  background: rgb(35, 62, 92);
}

.confirmadd_el-cascader-dropdown {
  background-color: #233e5c !important;
  border: unset;

  .el-cascader-menu:last-child .el-cascader-node,
  .el-cascader-node.is-selectable.in-active-path {
    color: #fff;
  }

  .el-cascader-node:not(.is-disabled):hover {
    background-color: #51e3f3;
  }

  .el-cascader-node:not(.is-disabled) {
    /* color: #001427; */
  }

  .el-popper__arrow::before {
    background: #233e5c !important;
  }

  .el-cascader-node:not(.is-disabled):focus {
    background-color: #51e3f3;
  }
}
</style>
